<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      v-model="iptTask"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="addTask"
    />
  </header>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      iptTask: "",
    }
  },
  methods:{
    ...mapMutations(["setTaskList"]),
    addTask(){
      // 判断输入内容是否为空
      if(!this.iptTask.length) return alert('输入内容不能为空~')
      // 将输入的内容添加到vuex
      const task = {
        id: this.taskList.length ?  this.taskList.at(-1).id + 1 : 100,
        text: this.iptTask,
        isSelected: false
      }
      this.setTaskList([...this.taskList, task])
      this.iptTask = ''
    }
  },
  computed: {
    ...mapState(["taskList"]),
    isAll: {
      set(val){
        let newArr = this._.cloneDeep(this.taskList)
        newArr.forEach(item => item.isSelected = val)
        this.setTaskList(newArr)
      },
      get(){
        return this.taskList.length && this.taskList.every(item => item.isSelected)
      }
    }
  },
    
  
}
</script>
